<template>
  <div id="musicListDetails" class="page">
    <nav style="margin:20px 0px 40px 0px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>歌单</el-breadcrumb-item>
        <el-breadcrumb-item>{{current.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </nav>

      <div class="content">
          <div id="left">
              <div style="width: 200px; height:200px;border:1px solid gray;" class="image">
                <img :src="current.picUrl == null ? current.coverImgUrl : current.picUrl" :title="current.name" width="100%;">
              </div>
              <div>
                <p>名称：{{current.name}}</p>
                <p>播放量：{{current.playCount >= 10000 ? (current.playCount / 10000).toFixed(2) + '万' : current.playCount}}</p>
                <p>上传时间：{{getUpdateTime(current.trackNumberUpdateTime)}}</p>
                <p v-if="current.tag != null">类型：{{current.tag}}</p>
              </div>
            <div style="margin-top:20px;">
              <el-button type="primary" @click="addPlayListAll()">
                <i class="el-icon-caret-right"></i>全部播放
              </el-button>
            </div>
          </div>
          <div id="right">
            <p>
                <span style="font-size:18px;">{{current.name}}</span> - 歌曲列表
            </p>
            <el-table ref="multipleTable" :data="topSongsList" tooltip-effect="dark" style="width: 100%">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="歌曲名称" width="600px;">
                  <template slot-scope="scope">
                      {{scope.row.name}} -
                    <span v-for="(a,b) in scope.row.artists" :key="b">
                      {{a.name}}
                      <i v-if="b != scope.row.artists.length - 1">、</i>
                    </span>
                  </template>
              </el-table-column>
              <el-table-column width="45px;">
                  <template slot-scope="scope">
                    <a href="javascript:void(0)" @click="addPlayList(scope.row)"><i class="el-icon-headset"></i></a>
                  </template>
              </el-table-column>
            </el-table>
          </div>
      </div>
  </div>
</template>

<script>
import functions from "../../utils/functions";
import StorageUtil from "../../utils/StorageUtil";

export default {
  name: "musicListDetails",
  data(){
      return{
          current:{},
          topSongsList:[],
      }
  },
  methods:{
      getMusicList(name){
          this.$get("https://autumnfish.cn/search?keywords=" + name).then(result => {
              this.topSongsList = result.result.songs;
          })
      },
      getUpdateTime(nS){
        let now = new Date(nS);
        let year=now.getFullYear(), month=now.getMonth()+1, date=now.getDate();
        return year+"-"+month+"-"+date;
      },
      addPlayList(item){
          console.log(item);
          functions.addPlayList(item);
          this.$notify({
            title: '成功',
            message: '已添加到播放列表',
            type: 'success'
          });
      },
      addPlayListAll(){
        let arrays = [];
        this.topSongsList.forEach(item => {
          let names = "";
          item.artists.forEach(e => { names += e.name });
          arrays.push({
              singName: item.name,
              singerName: names,
              singId: item.id,
          })
        });
        StorageUtil.local.setItem("playList",arrays);
        this.$router.push({path:'/play'});
      }
  },
  created() {
      this.current = JSON.parse(StorageUtil.session.getItem("singDetails"));
      this.getMusicList(this.current.name);
  }
}
</script>

<style scoped>
  #musicListDetails #left{
    width:200px;
    margin-right:100px;
  }
  #musicListDetails #left p{
      margin-top:20px;
  }
  #musicListDetails #right{
    width:700px;
  }
</style>
